<%@page import="com.hamizhong.iflowers.web.vo.FlowerCountVO"%>
<%@page import="com.hamizhong.iflowers.web.vo.FlowerFloridVO"%>
<%@page import="com.hamizhong.iflowers.web.vo.TargetVO"%>
<%@page import="com.hamizhong.iflowers.web.vo.FestivalVO"%>
<%@page import="com.hamizhong.iflowers.web.vo.PurposeVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="../../common/common_admin.jsp" %>
<title>商品添加</title>
<link rel="stylesheet" href="<%=request.getContextPath() %>/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.js"></script>
</head>

<%
	List<PurposeVO> purposeVOList = (List<PurposeVO>)request.getAttribute("purposeVOList");
	List<FestivalVO> festivalVOList = (List<FestivalVO>)request.getAttribute("festivalVOList");
	List<TargetVO> targetVOList = (List<TargetVO>)request.getAttribute("targetVOList");
	List<FlowerFloridVO> flowerFloridVOList = (List<FlowerFloridVO>)request.getAttribute("flowerFloridVOList");
	List<FlowerCountVO> flowerCountVOList = (List<FlowerCountVO>)request.getAttribute("flowerCountVOList");
%>

<script type="text/javascript">
	var editor = null;
	KindEditor.ready(function(K) {
		var editor1 = K.create('textarea[name="goodsDescribe"]', {
			cssPath : '<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.css',
			uploadJson : '<%=request.getContextPath() %>/kindeditor/jsp/upload_json.jsp',
			fileManagerJson : '<%=request.getContextPath() %>/kindeditor/jsp/file_manager_json.jsp',
			allowFileManager : true,
	
			resizeType : -1,
			minWidth: 700,
			minHeight: 200,
			items : [
				'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
				'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
				'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
			afterCreate : function() {
				var self = this;
				K.ctrl(document, 13, function() {
					self.sync();
					document.forms['itemForm'].submit();
				});
				K.ctrl(self.edit.doc, 13, function() {
					self.sync();
					document.forms['itemForm'].submit();
				});
			}
	
		});
		prettyPrint();
		editor = editor1;
	});
	
	function checkFormInfo() {
		var goodsName = $('#goodsName').val();
		var goodsPrice = $('#goodsPrice').val();
		var purposeId = $('input[name="purposeId"]:checked');
		var festivalId = $('input[name="festivalId"]:checked');
		var targetId = $('input[name="targetId"]:checked');
		var flowerFloridId = $('#flowerFloridId').val();
		var flowerCountId = $('#flowerCountId').val();
		var sortId = $('#sortId').val();
		var remarks = $('#remarks').val();
		
		var picFileName1 = $('#picFileName1').val();
		var picFileName2 = $('#picFileName2').val();
		var picFileName3 = $('#picFileName3').val();
		
		var productIds = $('input[name="productIds"]');
		//商品详细的html
		var goodsDescribe = editor.html();
		//var text = editor.text();

		if(goodsName == null || goodsName == "") {
			alert("请填写商品名称！");
			$('#goodsName').focus();
			return false;
		}
		if(goodsPrice == null || goodsPrice == "") {
			alert("请填写商品价格！");
			$('#goodsPrice').focus();
			return false;
		}
		if(purposeId.length < 1) {
			alert("请至少选择一个用途！");
			return false;
		}
		if(festivalId.length < 1) {
			alert("请至少选择一个节日！");
			return false;
		}
		if(targetId.length < 1) {
			alert("请至少选择一个赠送对象！");
			return false;
		}
		if(flowerFloridId == null || flowerFloridId == "") {
			alert("请选择花语！");
			return false;
		}
		if(flowerCountId == null || flowerCountId == "") {
			alert("请选择商品支数！");
			return false;
		}
		if(sortId == null || sortId == "") {
			alert("请填入排序号！");
			return false;
		}
		if(productIds.length < 1) {
			alert("请至少选择一个产品！");
			return false;
		}
		if(picFileName1 == null || picFileName1 == "" 
				|| picFileName2 == null || picFileName2 == "" 
				|| picFileName3 == null || picFileName3 == "" ) {
			alert("请选择上传完整的若干张商品展示图！！");
			return false;
		}
		if(goodsDescribe == null || goodsDescribe == "") {
			alert("请在编辑器中编辑商品的详细信息！");
			return false;
		}
		return true;
	}
</script>

<body>
	<div class="displayPageHeader">当前位置：产商管理 >> 商品添加</div>
	<div class="pageDiv">
		<div class="pageHeadDiv"><font>新增商品</font></div>
		<div class="infoDiv">
			<form id="itemForm" onsubmit="return checkFormInfo();" action="<%=request.getContextPath() %>/admin/doGoodsAdd.action" method="post" enctype="multipart/form-data">
			
				<div class="pageDiv" style="margin-left: 10px;">
					<div style="background-color: #E3EFFB;height: 25px;line-height: 25px;padding-left: 10px;">基本信息</div>
					<div class="infoDiv">
						<table cellpadding="2px">
							<tr>
								<td style="width: 70px;">&nbsp;&nbsp;商品名称&nbsp;&nbsp;</td>
								<td>
									<div style="border-bottom: 1px dashed #999;padding: 5px;">
										<input type="text" name="goodsName" id="goodsName" style="width: 200px;">
									</div>
								</td>
							</tr>
							
							<tr>
								<td style="width: 70px;">&nbsp;&nbsp;商品价格&nbsp;&nbsp;</td>
								<td>
									<div style="border-bottom: 1px dashed #999;padding: 5px;">
										<input type="text" name="goodsPrice" id="goodsPrice" style="width: 200px;">
									</div>
								</td>
							</tr>
							
							<tr>
								<td style="width: 70px;">&nbsp;&nbsp;用&nbsp;&nbsp;途&nbsp;&nbsp;</td>
								<td>
									<div style="border-bottom: 1px dashed #999;padding: 5px;">
									<%
									for(int i=0;i<purposeVOList.size();i++) {
										PurposeVO purposeVO = purposeVOList.get(i);
									%>
										<%=purposeVO.getPurposeName() %><input type="checkbox" name="purposeId" style="margin-right: 10px;" value="<%=purposeVO.getPurposeId() %>">
									<%
									}
									%>
									</div>
								</td>
							</tr>
							
							<tr>
								<td style="width: 70px;">&nbsp;&nbsp;节&nbsp;&nbsp;日&nbsp;&nbsp;</td>
								<td>
									<div style="border-bottom: 1px dashed #999;padding: 5px;">
										<%
											for(int i=0;i<festivalVOList.size();i++) {
												FestivalVO festivalVO = festivalVOList.get(i);
										%>
											<%=festivalVO.getFestivalName() %><input type="checkbox" name="festivalId" style="margin-right: 10px;" value="<%=festivalVO.getFestivalId()%>">
										<%
											}
										%>
									</div>
								</td>
							</tr>
							
							<tr>
								<td style="width: 70px;">&nbsp;&nbsp;赠送对象&nbsp;&nbsp;</td>
								<td>
									<div style="border-bottom: 1px dashed #999;padding: 5px;">
										<%
											for(int i=0;i<targetVOList.size();i++) {
												TargetVO targetVO = targetVOList.get(i);
										%>
											<%=targetVO.getTargetName() %><input type="checkbox" name="targetId" style="margin-right: 10px;" value="<%=targetVO.getTargetId()%>">
										<%
											}
										%>
									</div>
								</td>
							</tr>
							
							<tr>
								<td style="width: 70px;">&nbsp;&nbsp;花&nbsp;&nbsp;语&nbsp;&nbsp;</td>
								<td>									
									<div style="border-bottom: 1px dashed #999;padding: 5px;">
										<select id="flowerFloridId" name="flowerFloridId" style="width: 200px;">
											<%
												for(int i=0;i<flowerFloridVOList.size();i++) {
													FlowerFloridVO flowerFloridVO = flowerFloridVOList.get(i);
											%>
												<option value="<%=flowerFloridVO.getFlowerFloridId() %>"><%=flowerFloridVO.getFlowerFloridName() %></option>
											<%
												}
											%>
										</select>
									</div>
								</td>
							</tr>
							
							<tr>
								<td style="width: 70px;">&nbsp;&nbsp;支&nbsp;&nbsp;数&nbsp;&nbsp;</td>
								<td>
									<div style="border-bottom: 1px dashed #999;padding: 5px;">
										<select id="flowerCountId" name="flowerCountId" style="width: 200px;">
											<%
												for(int i=0;i<flowerCountVOList.size();i++) {
													FlowerCountVO flowerCountVO = flowerCountVOList.get(i);
											%>
												<option value="<%=flowerCountVO.getFlowerCountId() %>"><%=flowerCountVO.getFlowerCountName() %></option>
											<%
												}
											%>
										</select>
									</div>
								</td>
							</tr>
							
							<tr>
								<td style="width: 70px;">&nbsp;&nbsp;排序号&nbsp;&nbsp;</td>
								<td>
									<div style="border-bottom: 1px dashed #999;padding: 5px;">
										<input type="text" name="sortId" id="sortId" style="width: 200px;">
									</div>
								</td>
							</tr>
							
							<tr>
								<td style="width: 70px;">&nbsp;&nbsp;备&nbsp;&nbsp;注&nbsp;&nbsp;</td>
								<td>
									<div style="border-bottom: 1px dashed #999;padding: 5px;">
										<textarea id="remarks" name="remarks" id="remarks" style="width: 200px;" rows="" cols=""></textarea>
									</div>
								</td>
							</tr>
						</table>
					</div>
				</div>
			
			 	<div class="pageDiv" style="margin-left: 10px;">
					<div style="background-color: #E3EFFB;height: 25px;line-height: 25px;padding-left: 10px;">产品选择</div>
					<div class="infoDiv">
						<div class="itemListDiv" style="min-height: 150px">
							<table border="1px" id="itemListTable">
								
							</table>
						</div>
						<div class="margin_5"></div>
						<div style="border-top: 1px solid #CCC;width: 100%;height: 25px;line-height: 25px;text-align: left;">
							<input type="button" value="选择产品" onclick="alertProdSelectWindow()" style="cursor: pointer;margin-top: 5px;">
						</div>
					</div>
				</div>
				
				<div class="pageDiv" style="margin-left: 10px;">
					<div style="background-color: #E3EFFB;height: 25px;line-height: 25px;padding-left: 10px;">上传图片<span style="color: green;">【此栏中的预览图将进行缩放显示，仅做参考】</span></div>
					<div class="infoDiv">
						<div class="itemListDiv" style="min-height: 150px">
							<table border="1px" id="itemListTable2" cellpadding="0" cellspacing="0" bordercolor="white">
								<tr><td colspan="4"></td></tr>
								<tr height="80px;">
									<td>【列表展示图】[170x170]</td>
									<td>
										<div style="width: 200px;">
											<input type="file" name="upload" id="picFileName1" onchange="previewImage('previewPicDiv1',this,70,70);">
										</div>
									</td>
									<td>
										<div id="previewPicDiv1" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"></div>
									</td>
								</tr>
								<tr height="80px;">
									<td>【商品主大图】[460x460]</td>
									<td>
										<div style="width: 200px;">
											<input type="file" name="upload" id="picFileName2" onchange="previewImage('previewPicDiv2',this,70,70);">
										</div>
									</td>
									<td>
										<div id="previewPicDiv2" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"></div>
									</td>
								</tr>
								<tr height="80px;">
									<td>【商品特写图】[1000x1000]</td>
									<td>
										<div style="width: 200px;">
											<input type="file" name="upload" id="picFileName3" onchange="previewImage('previewPicDiv3',this,70,70);">
										</div>
									</td>
									<td>
										<div id="previewPicDiv3" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"></div>
									</td>
								</tr>
							</table>
						</div>
						<div class="margin_5"></div>
					</div>
				</div>
				
				<div class="pageDiv" style="margin-left: 10px;">
					<div style="background-color: #E3EFFB;height: 25px;line-height: 25px;padding-left: 10px;">详细描述</div>
					<div class="infoDiv">
						<div class="itemListDiv" style="min-height: 150px">
							<textarea id="goodsDescribe" name="goodsDescribe" cols="100" rows="8" style="width:100%;height:200px;visibility:hidden;"></textarea>
						</div>
						<div class="margin_5"></div>
					</div>
				</div>
				
				<div class="pageDiv" style="margin-left: 10px;">
					<div style="background-color: #E3EFFB;height: 25px;line-height: 25px;padding-left: 10px;">操作框</div>
					<div class="infoDiv">
						<input style="margin: 10px 0;" type="submit" value="确认添加">
					</div>
				</div>
			</form>
			
			<div class="margin_50"></div>
		</div>
	</div>
</body>

<script type="text/javascript">

	function alertProdSelectWindow() {
		//vReturnValue = window.showModelessDialog(sURL,[vArguments],[sFeatures]);
		//vArguments:可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等
		//var obj = new Object(); obj.name="testname";
		//对话框通过window.dialogArguments来取得传递进来的参数。
	    var retValue;
		var pageURL = '<%=request.getContextPath() %>/admin/productSelect.action?random='+Math.random();
		var dialogWidth = 800;
		var dialogHeight = 500;
		var dialogTop = (screen.height - dialogHeight)/2;
		var dialogLeft = (screen.width - dialogWidth)/2;
		var params = 'dialogTop:'+dialogTop+'px;dialogLeft:'+dialogLeft+';dialogWidth:'+dialogWidth+'px;dialogHeight:'+dialogHeight+'px;help:no;unadorned:no;resizable:no;status:no;';
		retValue = window.showModalDialog(pageURL,window,params);
	    //弹出窗口通过：window.returnValue="xxx"; 返回值。也可以是对象
	    //alert(retValue);
	}
	
	//此数组对象用于存放当前已经选择了的产品对象
	var selProdJsonObj = [];
	//过滤已经选择了的产品对象
	function mixSelProdJsonObj(data) {
		for(var i=0;i<data.length;i++) {
			var flag = true;
			for(var j=0;j<selProdJsonObj.length;j++) {
				//如果已经存在，则不予添加
				if(data[i].productId == selProdJsonObj[j].productId) {
					flag = false;
					break;
				}
			}
			if(flag) {
				selProdJsonObj.push(data[i]);
			}
		}
		data = selProdJsonObj;
		return data;
	}
	//供产品选择窗口调用的方法
	function returnSelProd(selProdJsonStr) {
		//var selProdJson = JSON.parse(selProdJsonStr);
		var selProdJson = eval('(' + selProdJsonStr + ')'); 
		var data = selProdJson.selResult;
		if(data.length > 0) {
			//如果是初次选择产品
			if(selProdJsonObj == null) {
				selProdJsonObj = data;
			}else {
				//否则需要进行过滤已经选择的产品
				data = mixSelProdJsonObj(data);
			}
			insertSelProdHtml(data);
		}
	}
	//执行添加选择的产品到列表中
	function insertSelProdHtml(data) {
		var itemListHtmlStr = '';
		itemListHtmlStr += '<thead>'+
								'<tr>'+
									'<th width="100">产品ID</th>'+
									'<th width="200">产品名称</th>'+
									'<th width="100">花材</th>'+
									'<th width="100">颜色</th>'+
									'<th width="200">备注</th>'+
									'<th width="100">操作</th>'+
								'</tr>'+
							'</thead>';
		for(var i=0;i<data.length;i++) {
			itemListHtmlStr += '<tr>'+
									'<td>'+
										data[i].productId+
									'</td>'+
									'<td>'+
										data[i].productName+
									'</td>'+
									'<td>'+
										data[i].varietyName+
									'</td>'+
									'<td>'+
										data[i].colorName+
									'</td>'+
									'<td>'+
										data[i].remarks+
									'</td>'+
									'<td>'+
										'<a href="javascript: void(0)" onclick="deleteItem(\''+data[i].productId+'\',\''+data[i].productName+'\')">删除</a>&nbsp;&nbsp;'+
										'<input type="text" name="productIds" value="'+data[i].productId+'" style="display: none;">'+
									'</td>'+
								'</tr>';
		}
		$('#itemListTable').html(itemListHtmlStr);
	}
	
	function deleteItem(productId,productName) {
		if(confirm("是否要删除产品 [ "+productName+" ] 吗？")) {
			var indexId;
			for(var i=0;i<selProdJsonObj.length;i++) {
				if(selProdJsonObj[i].productId == productId) {
					indexId = i;
					break;
				}
			}
			if(indexId != null) {
				selProdJsonObj.splice(indexId,1);
				insertSelProdHtml(selProdJsonObj);
			}
		}else {
		}
	}
	
	//验证图片格式
	function checkPicture(picFileId){
		var picFileName = document.getElementById(picFileId).value;
		var type = picFileName.substring(picFileName.lastIndexOf(".")+1, picFileName.length).toLowerCase();
		if(type!="jpg"&&type!="bmp"&&type!="gif"&&type!="png"){
			alert("请上传正确的图片格式");
			return false;
		}
		return true;
	}

	//图片预览
	function previewImage(divImage,upload,width,height) {  
		if(checkPicture(upload.id)){
			document.getElementById(divImage).style.display = "block";
			try{
				var picPath; 
				//图片路径     
				//var browser_Agent=navigator.userAgent;
				//判断浏览器的类型(这里暂时只验证有效支持：IE、FF、Chrome)
				if(navigator.appName.indexOf("Microsoft Internet Explorer") != -1 && document.all) {
					var preview = document.getElementById(divImage);
					picPath = upload.value;
					preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picPath;
					preview.style.width = width;
					preview.style.height = height;
				}else {
					picPath = window.URL.createObjectURL(upload.files[0]);
					document.getElementById(divImage).innerHTML = "<img id='picPreviewImg' src='"+picPath+"' width='"+width+"' height='"+height+"'/>";
				}
			}catch(e){
				alert("请上传正确的图片格式");
			}
		} 
	}
	
</script>

</html>